<template>
  <view
      class="bi-order-card"
      :class="{ 'is-progress': data.orderStatus === 1 }"
      @click="handleClick">
    <view class="bi-order-card__body">
      <view class="bi-order-card__fields">
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">姓名：</text>
          <text class="bi-order-card__field-target">
            {{ data.nickName || ''}}
          </text>
        </view>

        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">手机：</text>
          <text class="bi-order-card__field-target">
            {{ data.phonenumber || ''}}
          </text>
        </view>

        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">部门：</text>
          <text class="bi-order-card__field-target">
            {{ data.deptName|| '' }}
            <text v-if="data.chargeFlag===1" class="bi-people-card__charge-flag">部门负责人</text>
          </text>
        </view>

        <view v-if="qianzhengExpireDateFlag" class="bi-people-card__expire-warning">
          <view class="bi-order-card__field">
            <text class="bi-people-card__field-expire">
              签证过期日期是{{ sub5Hours(data.qianzhengExpireDate) || ''}} 过期，请及时提醒！
            </text>
          </view>
        </view>
      </view>
      <view class="bi-order-card__toolbar" v-if="$slots.toolbar">
        <slot name="toolbar"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { sub5Hours,isLessThanOrEqualToEndOfNextMonth} from '@/apis/order.js';

export default {
  name: 'BiPeopleCard',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    currentTimeType: {
      type: Number,
      default:null
    }
  },
  computed: {
    qianzhengExpireDateFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.qianzhengExpireDate)
    },
  },
  methods: {
    sub5Hours(currentTime){
      return sub5Hours(currentTime)
    },
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="less">
.bi-order-card {
  margin: 16px;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  line-height: 1.7em;
  text.is-light {
    color: #f47554;
  }
  &.is-progress {
  }
  box-shadow: 5rpx 5rpx 8rpx #bfbfbf;
}

.bi-order-card__demand {
  font-size: 28rpx;
  font-weight: bold;
  color: #f47554;
  text-align: right;
  margin-bottom: 10rpx;
}

.bi-order-card__company {
  font-size: 16px;
  font-weight: bold;
  float: right;
}

.bi-order-card__linkman {
  font-size: 12px;
  color: #666;
}

.bi-order-card__head {
  border-bottom: 1px solid #e3e5e5;
  padding-bottom: 41rpx;
  margin-bottom: 41rpx;
}

.bi-order-card__field {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 6px 0;
  border-bottom: 1rpx solid #e3e5e5;
}

.bi-order-card__field-label {
  font-weight: medium;
  font-size: 28rpx;
  color: #333;
  display: inline-block;
  min-width: 140rpx;
  vertical-align: top;
}

.bi-order-card__field-label-unpod {
  font-weight: normal;
  color: #ffc107;
}

.bi-order-card__field-label-unreceive {
  font-weight: normal;
  color: red;
}

.bi-order-card__toolbar {
  padding: 4px 0;
}

.bi-order-card__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.bi-order-card__addon {
  padding-bottom: 3px;
}

.bi-order-card__notfilled {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 4px;
}

.bi-order-card__notfilled-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-top: -1px;
}

.bi-order-card__notfilled-text {
  color: #f00;
}

.bi-order-card__field-target {
  word-wrap: break-word;
  width: auto;
  display: inline-block;
  font-size: 26rpx;
  color: #555;
  text-align: right;
  vertical-align: top;
  max-width: 400rpx;
  white-space: normal;
}

.bi-order-card__field--danger .bi-order-card__field-label,
.bi-order-card__field--danger .bi-order-card__field-target {
  color: #dc3545;
}

.bi-order-card__field--completed .bi-order-card__field-label,
.bi-order-card__field--completed .bi-order-card__field-target {
  color: #28a745;
  font-weight: bold;
}

/* 人员卡片特有样式 */
.bi-people-card__charge-flag {
  font-size: 20rpx;
  border-radius: 20rpx;
  padding: 5rpx 10rpx;
  margin-left: 20rpx;
  font-weight: bold;
  background-color: #f47554;
  color: whitesmoke;
}

.bi-people-card__expire-warning {
  border: 1rpx #f47554 solid;
  border-radius: 10rpx;
  padding: 5rpx 10rpx;
  box-shadow: 4px 4px 6px #f47554;
  margin: 6px 0;
}

.bi-people-card__field-expire {
  word-wrap: break-word;
  width: 100%;
  color: #f47554;
  font-size: 24rpx;
}
</style>
